<template>
	<div class="pageContent" v-if="1">
		<view>
			<text>手机号</text>
			<input class="memberItIn" v-model="formData.telephone" />
			<icon type="cancel" @click="clearPhone"></icon>
		</view>

		<view class="btMain">
			<button class="btOne" @click="getText()">粘贴手机号</button>
			<button class="btOne" @click="returnMain(0)">获取房间号登录</button>
		</view>

		<text>openId</text>
		<input class="memberItIn" v-model="formData.openId" />
		<!-- 		<text>\n roomIdNow</text>
		<input class="memberItIn" v-model="formData.roomIdNow" /> -->
		<text>\n 当前用户openId:{{openId}}</text>
		<button class="btOne" @click="copyText()">复制当前用户openId</button>

		<view class="btMain">
			<text>头像显示</text>
			<image class="userIcon" :src="userInfo.avatarUrl"></image>
			<button class="btOne" @click="getUserProfile"> 获取头像昵称 </button>
		</view>

		<sc-tip :show="scTip"></sc-tip>
		<button @click="showScTip">显示sc-tip弹窗</button>

	</div>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {

		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				openId: "",
				formData: {
					"telephone": "18874183954",
					"roomIdNow": "22918",
					"openId": "onZpA5JuIaDlrDdaANOGGUcdo-g0",
					"roomId": "",
				},
				userInfo: "",

				src: '',
				width: 260, //宽度
				height: 300, //高度

				scTip: false,
			}
		},
		onLoad() {
			var formData = {
				"telephone": "18874183954",
				"roomIdNow": "22918",
				"openId": "onZpA5JuIaDlrDdaANOGGUcdo-g0"
			}
			this.formData = formData
			this.formData['roomId'] = this.formData.roomIdNow
			var openId = wx.getStorageSync('openId');
			this.openId = openId;

			this.cropper = this.selectComponent("#image-cropper");
		},
		methods: {
			cropperload(e) {
				console.log("cropper初始化完成");
			},
			loadimage(e) {
				console.log("图片加载完成", e.detail);
				wx.hideLoading();
				//重置图片角度、缩放、位置
				this.cropper.imgReset();
			},
			clickcut(e) {
				console.log(e.detail);
				//点击裁剪框阅览图片
				wx.previewImage({
					current: e.detail.url, // 当前显示图片的http链接
					urls: [e.detail.url] // 需要预览的图片http链接列表
				})
			},

			clearPhone() {
				this.formData.telephone = ""
			},

			returnMain(type = 0) {
				var phoneNumber = this.formData.telephone;
				wx.setStorageSync('phone', phoneNumber);
				wx.setStorageSync('openId', this.formData.openId);
				if (type == 0) {
					this.ownerRoomList(phoneNumber);
				}
			},
			//获取业主该手机号绑定的房屋列表-测试接口
			async ownerRoomList(phoneNumber) {
				var url = '/UserServer/room/ownerRoomList'
				var params = {
					telephone: phoneNumber,
					agen: 132,
				}
				var options = {
					url,
					params,
				}
				var param = await util.requestPro(options)
				console.log('ownerRoomList', param)
				//未录入用户
				if (!Array.isArray(param)) {
					console.log('param.length', param.length)
					getApp().globalData.roomList = ''
					wx.navigateTo({
						url: '/pages/index/select'
					})
				} else if (param.length == 1) {
					// 一个房屋，直接登录
					var room = param[0];
					getApp().noticeList(room)
				} //用户有多个房屋
				else if (param.length > 1) {
					//缓存room列表
					getApp().globalData.roomList = param
					wx.redirectTo({
						url: '/pages/index/select'
					})
				}
			},

			getUserProfile(e) {
				var userInfo = wx.getStorageSync('userInfo')
				if (!userInfo) {
					wx.getUserProfile({
						desc: '用于展示用户头像信息',
						success: (res) => {
							var userInfo = res.userInfo;
							wx.setStorageSync('userInfo', userInfo)
							this.userInfo = userInfo;
						},
						complete(res) {
							console.warn('getUserProfile', res);
						},
					})
				} else {
					var userInfo = wx.getStorageSync('userInfo', userInfo)
					this.userInfo = userInfo;
				}
			},

			copyText() {
				wx.setClipboardData({
					data: this.openId,
					success(res) {
						wx.getClipboardData({
							success(res) {
								console.warn(res.data) // data
							}
						})
					}
				})
			},
			getText() {
				var self = this;
				wx.getClipboardData({
					success(res) {
						console.warn(res.data) // data
						self.formData.telephone = res.data;
					}
				})
			},

			showScTip() {
				console.log('this.scTip',this.scTip)
				
				if(this.scTip) {
					this.scTip = !this.scTip
					setTimeout(()=>{this.scTip = !this.scTip},500)
				}else {
					this.scTip = !this.scTip
				}
			},

		},

	}
</script>

<style scoped>
	.pageContent {}

	.memberItIn {
		display: inline-block;
		width: 500rpx;
		line-height: 40rpx;
		height: 52rpx;
		margin: 10rpx;
		border: 1rpx solid;
	}

	.loginIm {
		width: 630rpx;
		height: 456rpx;
		margin: 100rpx 0rpx 150rpx 60rpx;
	}

	.loginTap {
		display: flex;
		justify-content: center;
	}

	.loginIc {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.loginTil {
		font-size: 36rpx;
		font-weight: bold;
	}

	.loginTeIm {
		position: absolute;
		width: 370rpx;
		height: 50rpx;
		left: 50%;
		margin-left: -185rpx;
		margin-top: 20rpx;
	}

	.handler {
		margin-top: 200rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.btMain {
		display: flex;
		flex-direction: row;
	}

	.btOne {
		min-width: 300rpx;
		max-width: 400rpx;
		margin: 8rpx;
	}

	.btOne.btDefalt {
		opacity: 0.6;
	}

	.userIcon {
		width: 48rpx;
		height: 48rpx;
		background: #666;
	}
</style>
